<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>

<body>

    <div id="app">
        <!-- vue是数据双向绑定   数据驱动视图 -->

        <p>输入框</p>
        <p>{{message}}</p>
        <!-- .lazy 在输入框中时，输入框的值要等到失去焦点时才会拿到 -->
        <!-- <input type="text" v-model.lazy="message" placeholder="编辑吧...."> -->
        <!-- .trim 去除字符串/值的两端的空格，但是不会去除字符串中间的空格 -->
        <input type="text" v-model.trim="message" placeholder="编辑吧....">

        <p>文本框</p>
        <p>{{message1}}</p>
        <textarea name="" id="" v-model="message1" placeholder="小扒菜...."></textarea>

        <!-- 复选框 -->
        <p>单个复选框</p>
        <input type="checkbox" name="" id="" v-model="checked">
        <label for="checkbox">{{checked}}</label>

        <p>选择多个复选框</p>
        <p>选择的数据： {{checkedNames}}</p>
        <input type="checkbox" name="" id="" value="张三" v-model="checkedNames">
        <label for="张三">张三</label>
        <input type="checkbox" name="" id="" value="李四" v-model="checkedNames">
        <label for="李四">李四</label>
        <input type="checkbox" name="" id="" value="招财" v-model="checkedNames">
        <label for="招财">招财</label>
        <input type="checkbox" name="" id="" value="元宝" v-model="checkedNames">
        <label for="元宝">元宝</label>


        <p>单选按钮</p>
        <p>{{picked}}</p>
        <input type="radio" name="" id="" value="One" v-model="picked">
        <label for="One">One</label>
        <input type="radio" name="" id="" value="Two" v-model="picked">
        <label for="Two">Two</label>
        <input type="radio" name="" id="" value="Three" v-model="picked">
        <label for="Three">Three</label>

        <!-- 下拉框 -->
        <!-- <p>下拉框选中的值：{{selected}}</p>
        <select name="" id="" v-model="selected">
            <option value="" disabled>请选择</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
        </select> -->
<!-- 
        <p>下拉框同时选择多个值：{{selected}}</p>
        <select name="" id="" v-model="selected" multiple>
            <option value="" disabled>请选择</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
        </select> -->


        <p>渲染下拉框</p>
        <p>{{selected}}</p>
        <select name="" id="" v-model="selected">
            <option :value="item.value" v-for="item in option">{{item.text}}</option>
        </select>

    </div>
</body>

<script>
    const { createApp } = Vue

    const vm = createApp({
        data() {
            return {
                message: '',
                message1: '',
                checked: true,
                checkedNames: [],
                picked: '',
                selected: '',
                option: [
                    {text: 'A', value: 'A'},
                    {text: 'B', value: 'B'},
                    {text: 'C', value: 'C'},
                    {text: 'D', value: 'D'},
                ]
            }
        },

    }).mount('#app')


</script>

</html>